
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>账目添加</title>
</head>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.19.4/moment.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script><body>

<div id="box1">
    <form action="/addServlet">
<!--活动名称输入框-->
    <div class="col-sm-7">
        <label>活动名称：</label>
        <div class="input-group">
            <span class="input-group-addon glyphicon glyphicon-file"></span>
            <input type="text"  name="project" class="form-control" aria-label="Amount (to the nearest dollar)">
        </div>
    </div>
<!--  类型选择框-->
    <div class="form-group col-sm-7">
        <label>选择类型：</label>
        <div class="input-group">
            <span class="input-group-addon glyphicon glyphicon-flag"></span>
            <select class="form-control" name="type">
                <option  vlaue="1">衣</option>
                <option  vlaue="2">食</option>
                <option  vlaue="3">住</option>
                <option  vlaue="4">行</option>
            </select>
        </div>
    </div>
<!--  金额输入框-->
    <div class="col-sm-7">
        <label>输入金额：</label>
        <div class="input-group">
            <span class="input-group-addon glyphicon glyphicon-yen"></span>
            <input type="text" name="money" class="form-control" aria-label="Amount (to the nearest dollar)">
        </div>
    </div>
<!--    日期选择器-->
        <div class='col-sm-7'>
            <div class="form-group">
                <label>选择日期：</label>
                <!--指定 date标记-->
                <div class='input-group date' id='datetimepicker1'>
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
                    <input type='text' name="date" class="form-control" />
                </div>
            </div>
        </div>
</div>
<div class='col-sm-7'>
    <button type="submit" class="btn btn-success">提交</button>
</div>
</form>
<div id="abc">
    <table class="table table-hover">
        <caption>记账表格</caption>
        <thead>
        <tr>
            <th>序号</th>
            <th>活动内容</th>
            <th>活动类型</th>
            <th>收入支出</th>
            <th>时间</th>
            <th>修改</th>
            <th>删除</th>
        </tr>
        </thead>
        <tbody id="tbody">

        </tbody>
    </table>
</div>

<script>
    $('document').ready(function () {
        $.ajax({
            url: "/lifeServlet",
            type: "GET",
            dataType: "json",
            success: function(data) {
                var sum = 0 ;
                for(let j=0;j<data.length;j++){
                    sum += Number(data[j].money);
                    str=`<tr>
                        <td>`+data[j].id+`</td>
                        <td>`+data[j].project+`</td>
                        <td>`+data[j].type+`</td>
                        <td>`+data[j].money+`</td>
                        <td>`+data[j].date+`</td>
                        <td><button type="button" class="btn btn-primary">修改</button></td>
                        <td><a href='deleteServlet?id=`+data[j].id+`' onclick="return confirm('确定删除吗？')"><button type="button" class="btn btn-danger" >删除</button></a></td>
                        </tr>`

                    $('#tbody').append(str);
                }
            str2=`<td>次数</td>
                  <td>`+data.length+`</td>
                  <td>总计</td>
                  <td>`+sum+`</td>`
                $('#tbody').append(str2);
            }
        })
            $('#datetimepicker1').datetimepicker({
                format: 'YYYY-MM-DD',
                locale: moment.locale('zh-cn')
            });
            $('#datetimepicker2').datetimepicker({
                format: 'YYYY-MM-DD hh:mm',
                locale: moment.locale('zh-cn')
            });
    })
</script>
</body>
</html>
